import React, { useEffect, useState } from 'react'
import { EnvironmentOutlined } from '@ant-design/icons';
import './buildingmap.scss'
import store from '../../../store/index'

function BuildingMap(props) {
    // 
    const [mapInput, setMapInput] = useState("")
    const setMap = () => {
        // 初始化地图
        navigator.geolocation.getCurrentPosition(position => {
            let myValue
            let lng = position.coords.longitude
            let lat = position.coords.latitude
            // 中心点
            let map = new window.BMapGL.Map("container");
            let point = new window.BMapGL.Point(lng, lat);
            map.centerAndZoom(point, 15);
            // 创建定位控件
            let locationControl = new window.BMapGL.LocationControl({
                // 控件基于停靠位置的偏移量（可选）
                offset: new window.BMapGL.Size(20, 20)
            });

            // 将定位控件添加到地图上、百度地图的定位
            map.addControl(locationControl);

            // 添加缩放控件
            let zoomCtrl = new window.BMapGL.ZoomControl();

            map.addControl(zoomCtrl);
            // 获取地址详情信息标注点信息窗口的方法
            const fn = (fnLng, fnLat, fnPoint) => {
                // 创建地理编码实例      
                var myGeo = new window.BMapGL.Geocoder();
                // 地址变量
                let address
                let business
                // 根据经纬度获得到地址    
                myGeo.getLocation(new window.BMapGL.Point(fnLng, fnLat), function (result) {
                    if (result) {
                        console.log('地址解析', result);
                        address = "地址：" + result.address
                        business = result.surroundingPois[0].title
                        // 标注 经纬度的定位
                        var marker = new window.BMapGL.Marker(fnPoint);        // 创建标注   
                        map.addOverlay(marker);
                        marker.addEventListener('click', (e) => {
                            map.openInfoWindow(infoWindow, fnPoint);
                        })
                        // 信息窗口
                        var opts = {
                            width: 100,     // 信息窗口宽度
                            height: 60,    // 信息窗口高度
                            title: business  // 信息窗口标题
                        }
                        var infoWindow = new window.BMapGL.InfoWindow(address, opts);  // 创建信息窗口对象
                        map.openInfoWindow(infoWindow, fnPoint);
                    }
                });
            }

            //让 input 输入内容带提示
            let ac = new window.BMapGL.Autocomplete(
                {
                    "input": "suggestId"
                    , "location": map
                });

            ac.addEventListener("onconfirm", function (e) {    //鼠标点击下拉列表后的事件
                let _value = e.item.value;
                // 地址名称 
                myValue = _value.province + _value.city + _value.district + _value.street + _value.business;

                setPlace(myValue)
                store.zhangxi.mapAddress = myValue
            });

            // 点击 input 下拉的结果搜索
            function setPlace(myValue) {
                map.clearOverlays();    //清除地图上所有覆盖物
                // function myFun() {
                //     var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
                //     map.centerAndZoom(pp, 18);
                //     fn(pp.lng, pp.lat, pp)
                // }
                // let local = new window.BMapGL.LocalSearch(map, {  //智能搜索
                //     onSearchComplete: myFun
                // });
                // local.search(myValue);

                var local = new window.BMapGL.LocalSearch(map, {
                    renderOptions: { map: map }
                });
                local.search(myValue);
            }

            if (props.tenWher != undefined) {
                setMapInput(props.tenWher)
                ac._inputValue = props.tenWher
                setPlace(props.tenWher)
            }

        })

    }
    useEffect(() => {
        console.log(props.tenWher);
        setMap()

    }, [])

    return (

        <div className='ZxMap_box'>
            {/* 地图实例 */}
            <div id="container">

            </div>

            {/* 搜索框 */}
            <input type="text" id="suggestId" value={mapInput} onChange={(e) => {
                console.log(e.target.value);
                setMapInput(e.target.value)
                store.zhangxi.mapAddress = e.target.value
                console.log(store.zhangxi.mapAddress, '地址');
            }} />
            {/* 搜索按钮
            <button className='ZxMap_box_button' onClick={() => {
                mapGet('dasd')
            }}>搜索</button> */}
            <EnvironmentOutlined style={{ fontSize: "22px", color: "rgb(24,144,255)" }} />
        </div>
    )
}

export default BuildingMap